<template>
    <div class="vfilter">
        <h2>Vue.filter</h2>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            作用
        </el-tag>
        <p class="decr">
            就是对给定的参数进行过滤，最终得到一个需要的值。比如对文本进行格式化。<br>
            过滤器只可以在两个地方使用：<br>
            <ul>
                <li>
                    双花括号插值中
                </li>
                <li>
                    v-bind表达式中
                </li>
            </ul>
            <code v-html="code">
                
            </code>
            <br>
            <span>前面的第一个值是传给过滤器的参数，|叫做管道符，它后面的是过滤器名称</span>
            <br>
            <span style="color: #409eff;">可以只使用一个过滤器：</span><br>
            <span>message | filterA</span><br>
            <span>这时，message就作为参数，传给后面的过滤器filterA</span>
            <br>
            <span style="color: #409eff;">还可以同时使用多个过滤器：</span><br>
            <span>message | filterA | filterB ...</span><br>
            <span>此时，message先作为参数传给filterA，然后filterA过滤器的结果将会被作为参数，传给过滤器filterB</span><br>
            <span style="color: #409eff;">这里还可以定义过滤器接收参数的个数：</span><br>
            <span>message | filterA('hello')</span><br>
            <span style="color: red;">*注意：</span>
            <span>此时filterA不是接收一个参数的函数，而是可以接收两个参数的函数。</span><br>
            <span>并且，message是第一个参数，而'hello'是作为第二个参数传入的。</span>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            >
            Demo
        </el-tag>
        <p class="decr">
            输入英文名称，通过过滤器，变成大写字母的英文名称
        </p>
        <el-input 
            v-model="input" 
            placeholder="请输入英文名称"
            >
        </el-input>
        <!-- 使用过滤器 -->
        <h3 class="h3">{{input | textFilter}}</h3>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';

// 第一种注册方式：注册全局过滤器
// import Vue from 'vue';
// Vue.filter('textFilter', function(val) {
//     return val.toUpperCase();
// })

export default {
    name: 'Vfilter',
    mixins: [mixinPage],
    data() {
        return {
            code: `<!-- 在双花括号中 -->
                {{ message | filterA | filterB | ... }}<br>

                <!-- 在 v-bind 中 -->
                <-div v-bind:id="rawId | filterA..."-><-/div->`,
            input: ''
        }
    },
    // 第二种注册方式：注册局部过滤器
    filters: {
        textFilter: function(val) {
            return val.toUpperCase();
        }
    }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';

.decr {
    ul {
        padding-left: 30px;
        box-sizing: border-box;
    }
}

</style>